<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment :: common_header(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>江南笑书生</title>
    <!-- Semantic UI 框架 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <!-- 自己编写的 CSS -->
    <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
<!-- 导航 -->
<nav th:replace="_fragment :: common_nav(0)"
     class="ui inverted attached segment me-padded-tb-mini me-shadow">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h1 class="ui item header teal">江南笑书生</h1>
            <a href="#" class="ui item active me-mobile-hide me-item">
                <i class="home icon"></i>首页
            </a>
            <a href="categories.html" class="ui item me-mobile-hide me-item">
                <i class="idea icon"></i>分类
            </a>
            <a href="tags.html" class="ui item me-mobile-hide me-item">
                <i class="tags icon"></i>标签
            </a>
            <a href="archives.html" class="ui item me-mobile-hide me-item">
                <i class="archive icon"></i>归档
            </a>
            <a href="aboutme.html" class="ui item me-mobile-hide me-item">
                <i class="info icon"></i>关于我
            </a>
            <div class="ui right item me-mobile-hide me-item">
                <div class="ui icon input">
                    <input type="text" placeholder="搜索...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- 移动端控制菜单隐藏与显示 -->
    <!-- <a href="#" class="ui menu toggle black icon button me-right-top me-mobile-show">
        <i class="sidebar icon"></i>
    </a> -->
    <button class="ui secondary icon button menu toggle me-right-top me-mobile-show">
        <i class="sidebar icon"></i>
    </button>
</nav>

<div class="me-container-small me-padded-tb-massive">
    <div class="ui error message">
        <div class="ui container">
            <h1>404</h1>
            <p>对不起，您访问的资源不存在</p>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer th:replace="_fragment :: common_footer"
        class="ui inverted vertical segment me-padded-tb-massive">
    <div class="ui container center aligned">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <!-- <h4 class="ui inverted header"><i class="wechat icon"></i>与我联系</h4> -->
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/img/wechat.jpg}"
                             src="../static/img/wechat.jpg" alt="wechat"
                             class="ui rounded image"
                             style="width: 8em;">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list">
                    <div class="item">
                        <i class="envelope icon"></i> Email : cplasfyin@163.com
                    </div>
                    <div class="item">
                        <i class="qq icon"></i> QQ : 2916393359
                    </div>
                    <div class="item">
                        <i class="wechat icon"></i> 微信 : DX10485
                    </div>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="five wide column">
                <h4 class="ui inverted header">江南笑书生</h4>
                <p style="opacity: 0.6 !important;">
                    这是我的个人博客，会分享关于编程、写作、思考相关的内容，希望可以给来到这的人有所帮助
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p style="opacity: 0.5 !important;">
            Copyright
            <i class="copyright outline icon"></i>
            2020 - 2021 Designed by YGQ
        </p>
    </div>
</footer>

</body>
</html>